<template>
    <div class="pages message">

      <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">客服电话:</label>
          <span class="weui-form-preview__value">

              <a @click="callPhone">13116858811</a>
            </span>
        </div>

      </div>



          <div class="weui-cells__title">意见与建议</div>
          <div class="weui-form-preview">


            <form @submit='addMessage'>

          <div class="weui-form__control-area">
            <div class="weui-cells__group weui-cells__group_form">

              <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                  <div class="weui-cell__bd">

                    <textarea class="weui-textarea" :value="message" @blur="onInput($event)" placeholder="请输入您的意见和建议" rows="3"></textarea>

                  </div>
                </div>
              </div>
            </div>
          </div>
              <div class="weui-cells__title">上传图片</div>
              <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                  <div class="weui-cell__bd">
                    <div class="weui-uploader">
                      <!-- <div class="weui-uploader__hd">
                          <p class="weui-uploader__title">图片上传</p>
                          <div class="weui-uploader__info">0/2</div>
                      </div> -->
                      <div class="weui-uploader__bd" style="height: 200rpx">
                        <ul class="weui-uploader__files" id="uploaderFiles">

                          <li class="weui-uploader__file weui-uploader__file_status"   v-if="imgUrl" :style="{backgroundImage:'url('+imgUrl+')'}" @click="handleImagePreview()">
<!--                            <van-icon name="close" color="#1989FA" @click="remove(index)" size="16" style="position: absolute;bottom:150rpx;right: 0;"/>-->
                            <van-icon name="close" color="red" @click.stop="remove(index)" size="50rpx" style="position: absolute;bottom:124rpx;right: -20rpx;background: #fff;border-radius: 50%;"/>
                            <!--            <div class="weui-uploader__file-content" @click="remove(index)">-->
                            <!--              <i class="weui-icon-warn"></i>-->
                            <!--            </div>-->
                          </li>
                        </ul>
                        <div class="weui-uploader__input-box" v-if="!imgUrl"  @click="upload">
<!--                          <input id="uploaderInput" @click="upload" class="weui-uploader__input" type="file" accept="image/*" multiple="">-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          <div class="weui-form__opr-area">
            <button class="weui-btn weui-btn_primary" form-type="submit" id="showTooltips">提交</button>
          </div>
            </form>
            <button class="weui-btn " style="background-color: rgb(61,176,243);margin-top:30rpx;" @click="goDetail">查看回复</button>
      </div>
<!--      <div class="weui-cells__title">上传截图</div>-->

      </div>


</template>

<script>
    import * as host from "../../utils/api"
    export default {
        name: "index",
        data(){
          return {
              message:"",
              images: [],
            imgUrl:""
          }
        },
      onReady(){
        this.message="";
      },
        onShow(){
            wx.setNavigationBarTitle({
                title: '客服'
            })

        },
      methods:{
          handleImagePreview (img, index) { // 预览图片
              const idx = 0
              const images = [this.imgUrl]
           //   console.log(images)
              wx.previewImage({
                  current: images[idx], // 当前预览的图片
                  urls: images // 所有要预览的图片
              })
          },
          remove (inex) {
             this.imgUrl=""
          },
          upload (e) {
              var that = this
              let i = 0
              let upLength // 图片数组长度
              let imgFilePaths
              wx.chooseImage({
                  count: 1, // 默认9
                  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                  success: function (res) {
                      // console.log(res)
                      // that.images.push(res.tempFilePaths[0])
                      // // that. urlTobase64(res.tempFilePaths[0])
                      // let len = that.files.concat(res.tempFilePaths);
                      imgFilePaths = res.tempFilePaths
                      upLength = imgFilePaths.length
                      // if(len.length > max){
                      //   that.$mptoast('图片最多只能选择' + max);
                      //   return false;
                      // }
                      /**
                       * 上传完成后把文件上传到服务器
                       */
                      wx.showLoading({
                          title: '上传中...'
                      })
                      that.upLoad(imgFilePaths, i, upLength)
                  }
              })
          },
          upLoad (imgPath, i, upLength) {
              let that = this
              let token = wx.getStorageSync('Authorization')

              // 上传文件
              wx.uploadFile({
                  url: `${host.host}/api/qiniu/upload`,
                  filePath: imgPath[i],
                  name: 'file',
                  header: {
                      'Content-Type': 'multipart/form-data',
                      'Authorization': `Bearer ${token}`
                  },

                  success: function (res) {

                    that.imgUrl= JSON.parse(res.data).data
                      wx.showToast({
                          title: '上传成功!',
                          icon: 'success',
                          duration: 2000

                      })
                      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                      // that.files = that.files.concat(imgPath[i]);        //合并图片显示数组
                      // let imgData = JSON.parse(res.data);
                      // that.upImg.push(imgData.data);
                  },
                  fail: function (res) {
                //      console.log(res)
                      wx.hideLoading()
                      wx.showModal({
                          title: '错误提示',
                          content: '上传图片失败',
                          showCancel: false,
                          success: function (res) { }
                      })
                  },
                  complete: function () {
                      i++
                      if (i == upLength) {
                          wx.hideLoading() // 上传结束，隐藏loading
                      } else {
                          that.upLoad(imgPath, i, upLength)
                      }
                  }
              })
          },
          goDetail(){
              wx.navigateTo({ url: '/pages/messageList/main' })
          },
          onInput(e){
           //  console.log(e)
              this.message=e.mp.detail.value;
          },
            addMessage(){
                let that=this;
              let userId =  wx.getStorageSync('userId')
               // console.log(that.message)
                this.$http.request({
                    method: 'POST',
                    url: `/api/callCenter/add`,
                    body: {
                        content:that.message,
                        contentImg:this.imgUrl,
                      userId:userId
                    }
                }).then((data)=>{
                    if(data.code==200){
                        wx.showToast({
                            title: '添加成功',
                            icon: 'success',
                            duration: 2000,
                            success:()=>{
                                that.message="",
                                   that.imgUrl="";
                            }
                        })
                    }
                })
            },
        callPhone(){
          wx.makePhoneCall({
            phoneNumber: '1340000' //仅为示例，并非真实的电话号码
          })
        }
      }
    }
</script>
<style>
  .message .weui-uploader__file_status:before{
    background-color:transparent ;
  }
</style>
<style scoped>
  .message .weui-uploader__file_status{
    margin-top:28rpx;
  }
  .message .weui-uploader__input-box{
    /*width: 140rpx;*/
    /*height: 140rpx;*/
    position: relative;

  }
  .weui-form-preview__bd{
    background: #fff;
  }
</style>
